<template>
  <div class="cameramain">
    <!--canvas截取流-->
    <canvas ref="canvas" v-show="false" width="640" height="480"></canvas>

    <!--图片展示-->
    <video
      ref="video"
      width="100%"
      height="40%"
      autoplay
    ></video>
    <el-row :gutter="20" style="padding:0;margin:0;">
      <el-col :span="16" style="padding:0;">
        <el-select
        style="line-height:10px;"
          v-model="modelSel"
          placeholder="请选择摄像头"
          @change="changeSel"
        >
          <el-option
            v-for="(item, index) in videoArr"
            :value="item.id"
            :key="index"
            >{{ item.label }}</el-option>
        </el-select>
      </el-col>
      <el-col :span="8">
        <!-- <el-button type="primary" @click="callCamera" style="margin-right: 10px"
          >开启摄像头</el-button
        > -->
        <el-button type="primary" @click="photograph" style="margin-right: 10px"
          >拍摄</el-button
        >
      </el-col>
    </el-row>
    <!-- <el-row :gutter="20">
      <el-col :span="16">
        <el-button type="primary" @click="closeCamera">关闭摄像头</el-button>
      </el-col>
      <el-col :span="8">
        <el-button type="primary" @click="photograph">拍摄</el-button>
      </el-col>
    </el-row> -->
    <!--确认-->
    <!--开启摄像头-->

    <!-- <Button @click="changePhoto" style="margin-right: 10px">切换摄像头</Button> -->
    <!--关闭摄像头-->

    <!-- <el-select v-model="modelSel" style="width: 200px" @change="changeSel">
      <el-option v-for="(item, index) in videoArr" :value="item.id" :key="index">{{
        item.label
      }}</el-option>
    </el-select> -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      videoArr: [], //所有的摄像头
      modelSel: "", //
      myInterval: null,
    };
  },
  created() {
    this.changePhoto();
    this.callCamera();
  },
  methods: {
      takesuccess() {
        this.$notify({
          title: '拍摄成功',
          message: '这是一条成功的提示消息',
          type: 'success'
        });
      },
    // 调用摄像头
    callCamera() {
      console.log("打开摄像头");
      // H5调用电脑摄像头API
      navigator.mediaDevices
        .getUserMedia({
          video: true,
        })
        .then((success) => {
          // 摄像头开启成功
          console.log("打开成功");
          this.$refs["video"].srcObject = success;
          // 实时拍照效果
          this.$refs["video"].play();
          console.log("画面展示成功");
        })
        .catch((error) => {
          console.error("摄像头开启失败，请检查摄像头是否可用！");
        });
    },
    // 拍照
    photograph() {
      let ctx = this.$refs["canvas"].getContext("2d");
      // 把当前视频帧内容渲染到canvas上
      ctx.drawImage(this.$refs["video"], 0, 0, 640, 480);
      // 转base64格式、图片格式转换、图片质量压缩---支持两种格式image/jpeg+image/png
      let imgBase64 = this.$refs["canvas"].toDataURL("image/jpeg", 0.7);
      console.log(imgBase64)

      /**------------到这里为止，就拿到了base64位置的地址，后面是下载功能----------*/

      // 由字节转换为KB 判断大小
      let str = imgBase64.replace("data:image/jpeg;base64,", "");
      let strLength = str.length;
      let fileLength = parseInt(strLength - (strLength / 8) * 2); // 图片尺寸  用于判断
      let size = (fileLength / 1024).toFixed(2);
      console.log(size); // 上传拍照信息  调用接口上传图片 .........
        this.takesuccess()
        this.$emit("picChange",str)
      // 保存到本地
    //   let ADOM = document.createElement("a");
    //   ADOM.href = this.headImgSrc;
    //   ADOM.download = new Date().getTime() + ".jpeg";
    //   ADOM.click();
    },
    // 关闭摄像头
    closeCamera() {
      if (!this.$refs["video"].srcObject) return;
      let stream = this.$refs["video"].srcObject;
      let tracks = stream.getTracks();
      tracks.forEach((track) => {
        track.stop();
      });
      this.$refs["video"].srcObject = null;
    },

    //切换本地摄像头
    changePhoto() {
      /**得到所有的设备*/
      navigator.mediaDevices
        .enumerateDevices()
        .then((devices) => {
          console.log(devices);
          this.videoArr = [];
          devices.forEach((device) => {
            if (device.kind == "videoinput") {
              this.videoArr.push({
                label: device.label,
                id: device.deviceId,
              });
            }
          });
        })
        .catch(function (err) {
          layer.msg(err.name + ": " + err.message);
        });
      console.log(this.videoArr);
    },
    //切换下拉
    changeSel(val) {
      console.log("下拉切换了");
      const videoConstraints = {};
      if (val === "") {
        videoConstraints.facingMode = "environment";
      } else {
        videoConstraints.deviceId = { exact: val };
      }
      var constraints = {
        video: videoConstraints,
      };
      console.log("尝试切换下拉");
      console.log(constraints);
      this.getUserMedia(constraints);
    },

    /**打开摄像头*/
    getUserMedia(constraints, success, error) {
      console.log("尝试切换");
      if (navigator.mediaDevices.getUserMedia) {
        //最新的标准API
        navigator.mediaDevices
          .getUserMedia(constraints)
          .then((success) => {
            console.log("切换成功");
            // 摄像头开启成功
            this.$refs["video"].srcObject = success;
            // 实时拍照效果
            this.$refs["video"].play();
          })
          .catch(error);
      } else if (navigator.webkitGetUserMedia) {
        //webkit核心浏览器
        navigator.webkitGetUserMedia(constraints, success, error);
      } else if (navigator.mozGetUserMedia) {
        //firfox浏览器
        navigator.mozGetUserMedia(constraints, success, error);
      } else if (navigator.getUserMedia) {
        //旧版API
        navigator.getUserMedia(constraints, success, error);
      }
    },
  },
};
</script>

<style scoped>
.photo_view {
  display: flex;
  width: 100%;
  /* height: 40%; */
}
.cameramain{
    width: 32%;
    height: 80vh;
    background-color: #fff;
}
</style>